<template>
  <div>
    <!-- 使用method中定义的转换后的结果 -->
    <!-- 当使用方法进行数据计算 格式转换 每调用一次 方法就会执行一次 -->
    <!-- <div>{{ strTestMet() }}</div>
    <div>{{ strTestMet() }}</div>
    <div>{{ strTestMet() }}</div>
    <div>{{ strTestMet() }}</div> -->
    <!-- 使用计算属性 不需要像方法一样去执行 直接当做属性使用即可-->
    <!-- 计算属性 只会计算一次 然后将结果保存到缓存中 再次调用 只需要使用计算后的结果即可 -->
    <!-- <div>{{ strTest }}</div>
    <div>{{ strTest }}</div>
    <div>{{ strTest }}</div>
    <div>{{ strTest }}</div> -->
    <!-- 使用过滤器简单的步骤 -->
    <!-- 
        1.决定要使用过滤器去处理什么格式的东西 要将原生js提供的日期转换为我们自己需要的格式 YYYY-MM-DD .....
        2.算法使我们自己写 使用已有的第三方插件 使用moment.js
        3.全局使用过滤器 局部使用过滤器 推荐使用全局的
        4.结合插件 完善自己的过滤器
     -->
    <!-- 使用过滤器去转换日期格式 -->
    <div>{{ newDate | fmtDate_global }}</div>
    {{ test() }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hellocomputed",
      newDate: new Date(),
    };
  },
  methods: {
    strTestMet() {
      console.log("我是method转换后得到的结果");
      return this.msg.split("").reverse().join("");
    },
    test() {
      setInterval(() => {
        console.log("123");
      }, 1000);
    },
  },
  // 计算属性 有数据需要进行格式转换 运算操作 复杂的数组的方法 高阶数组API
  computed: {
    strTest() {
      // 需要一个返回值
      console.log("我是computed转换后得到的结果");
      return this.msg.split("").reverse().join("");
    },
  },
  // 生命周期钩子函数 书独立存在的 独立的选项 不是在methods里生成
  // created() {
  //   console.log("created");
  //   console.log(this.msg);
  // },
  // mounted() {
  //   console.log("mounted");
  // },
};
</script>

<style scoped>
</style>
